<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>

  <title>Easy Widgets jQuery plugin - Example 21</title>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <!-- Require basic Easy Widgets style -->
  <link rel="stylesheet" type="text/css" media="screen" href="../../styles/jquery.easywidgets.css" />

  <!-- Require Easy Widgets style for this sample -->
  <link rel="stylesheet" type="text/css" media="screen" href="./example.css" />

  <!-- Require jQuery -->
  <script src="../../jscripts/jquery.min.js" type="text/javascript"></script>

  <!-- Require jQuery UI width draggable stuff -->
  <script src="../../jscripts/jquery-ui.min.js" type="text/javascript"></script>

  <!-- Require Easy Widgets plugin -->
  <script src="../../jscripts/jquery.easywidgets.js" type="text/javascript"></script>

  <!-- Require the Javascript for this example -->
  <script src="./example.js" type="text/javascript"></script>

 </head>
 <body>

  <h1>
   Easy Widgets jQuery plugin - Example 21
  </h1>

  <p>
   This example show the use of the "ShowEasyWidget()" and "HideEasyWidget()"
   public methods of the Easy Widgets plugin. This method not only show or
   hide a Widget by their ID, but also deal with the appropiate cookie, or
   course ir case that this feature are use. Try to show and hide the widgets,
   refresh the page and view that the widgets state are saved.
  </p>

  <!-- Above code not is part of the Easy Widgets plugin HTML markup -->




  <!-- Begin Easy Widgets plugin HTML markup -->

  <div>
   <a onclick="$.fn.HideEasyWidget('identifierwidget-1', WidgetOptions);"
    href="#" title="Hide a widget">Hide "identifierwidget-1" widget</a>
   |
   <a onclick="$.fn.ShowEasyWidget('identifierwidget-1', WidgetOptions);"
    href="#" title="Show a widget">Show "identifierwidget-1" widget</a>
  </div>

  <div>
   <a onclick="$.fn.HideEasyWidget('identifierwidget-2', WidgetOptions);"
    href="#" title="Hide a widget">Hide "identifierwidget-2" widget</a>
   |
   <a onclick="$.fn.ShowEasyWidget('identifierwidget-2', WidgetOptions);"
    href="#" title="Show a widget">Show "identifierwidget-2" widget</a>
  </div>

  <hr />

  <div>
   <a onclick="$.fn.HideEasyWidgets();"
    href="#" title="Hide all widgets">Hide all widgets</a>
   |
   <a onclick="$.fn.ShowEasyWidgets();"
    href="#" title="Hide all widgets">Show all widgets</a>
  </div>

  <div class="widget-place" id="widget-place-1">

   <div class="widget movable collapsable removable editable closeconfirm" id="identifierwidget-1">
    <div class="widget-header">
     <strong>Widget 1</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </div>
    <div class="widget-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Ut accumsan fringilla turpis. Lorem ipsum dolor.
    </div>
   </div>
  </div>
  <!-- /place-1 -->

  <div class="widget-place" id="widget-place-2">
   <div class="widget movable collapsable removable editable" id="identifierwidget-2">
    <div class="widget-header">
     <strong>Widget 2</strong>
    </div>
    <div class="widget-editbox">
      Edit the widget here
    </div>
    <div class="widget-content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Ut accumsan fringilla turpis. Lorem ipsum dolor.
    </div>
   </div>
  </div>
  <!-- /place-2 -->


  <!-- End Easy Widgets plugin HTML markup -->




  <!-- Bellow code not is part of the Easy Widgets plugin HTML markup -->

  <div style="clear:both">
   <strong>
    <a href="../../index.html#examples" title="Back to the examples index">Back to the examples index</a>
   </strong>
  </div>

  <hr />

  <div>
   Copyrights 2009 <a href="http://www.bitacora.davidesperalta.com/jquery-easywidgets" title="This plugin in my weblog">Easy Widgets jQuery plugin</a> by
    <a href="http://www.bitacora.davidesperalta.com/"
     title="David Esperalta blog">David Esperalta</a>
  </div>

 </body>
</html>